const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    mode: isProduction ? 'production' : 'development',
    entry: {
      app: './src/app.js',
      shop: './src/shop.js',
      VIP: './src/VIP.js',
      Login: './src/Login.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
    },
    module: {
      rules: [
        {
          test: /\.js$/i,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        },
        {
          test: /\.less$/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'less-loader',
          ],
        },
        {
          test: /\.css$/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
          ],
        },
        {
          test: /\.html$/i,
          use: [
            {
              loader: 'html-loader',
              options: {
                minimize: true,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      isProduction && new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
      }),
      new HtmlWebpackPlugin({
        template: './app.html',
        filename: 'app.html',
        chunks: ['app'],
        minify: {
          collapseWhitespace: true,
          removeComments: true,
        }
      }),
      new HtmlWebpackPlugin({
        template: './shop.html',
        filename: 'shop.html',
        chunks: ['shop'],
        minify: {
          collapseWhitespace: true,
          removeComments: true,
        }
      }),
      new HtmlWebpackPlugin({
        template: './VIP.html',
        filename: 'VIP.html',
        chunks: ['VIP'],
        minify: {
          collapseWhitespace: true,
          removeComments: true,
        }
      }),
      new HtmlWebpackPlugin({
        template: './Login.html',
        filename: 'Login.html',
        chunks: ['Login'],
        minify: {
          collapseWhitespace: true,
          removeComments: true,
        }
      }),
    ].filter(Boolean),
    optimization: {
      minimize: isProduction,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: { drop_console: true },
            format: { comments: false },
          },
        }),
        isProduction && new CssMinimizerPlugin(),
      ].filter(Boolean),
    },
    devServer: {
      static: {
        directory: path.resolve(__dirname, 'dist'),
      },

      compress: true,
      port: 9000,
      open: "./app.html",
      liveReload: true,
      hot: true,
      watchFiles: ['src/**'],
      client: {
        overlay: {
          errors: true,
        },
        progress: false
      }
    },
    target: 'web',
  };
};
